<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<navbar  title="实名认证" :isGoBack="true" :isNotice="true" :visible="true" :bgColor="bgColor" :btnColors='btnColor'></navbar>
		<!-- #endif -->
		<view class="opinion_wrap">
		  <form bindsubmit="formSubmit" class="ml-10 mr-10 mt-20 border-radius" style="width: 100%;background-color: #fff;">
			  <view class="flex uni-form-item all_shop">
			  	<text style="font-weight: 400;font-size: 24rpx;color: #EEA636;">身份证信息必须与手机号机主姓名一致，否则无法认证成功</text>
			  </view>
			  <view class="flex uni-form-item all_shop border-b">
			  	
			  	<view class="title" style="width: 125rpx;">姓名</view>
			  	<input class="uni-input ml-30 text-right" v-model="formData.realname" focus placeholder="请输入姓名"  placeholder-style="text-align: right;font-size:23rpx"/>
			  </view>			  
			  
			  <view class="flex uni-form-item all_shop border-b">
			  	<view class="title" style="width: 125rpx;">身份证号</view>
			  	<input class="uni-input ml-30 text-right" v-model="formData.idcard" focus placeholder="请输入身份证号"  placeholder-style="text-align: right;font-size:23rpx"/>
			  </view>
			  
			  <view class="flex uni-form-item all_shop border-b">
			  	<view class="title" style="width: 125rpx;">手机号</view>
			  	<input class="uni-input ml-30 text-right" v-model="formData.phone" focus placeholder="请输入手机号"  placeholder-style="text-align: right;font-size:23rpx"/>
			  </view>
			  
			<view class="flex uni-form-item all_shop border-b">
				<view class="title" style="width: 125rpx;">验证码</view>
				<view class="flex">
					<input class="uni-input ml-30 text-right" v-model="formData.code" focus placeholder="请输入验证码"  placeholder-style="text-align: right; font-size:23rpx;padding-top:10rpx"/>
					<view class="get-code ml-20" @click.stop="getCode()">
					   <text class="">{{getCodeText}}</text>
					</view>
				</view>				
			</view>			  				  
			<button @click="submit" >立即认证</button>
		  </form>
		</view> 		 
	</view>	
</template>

<script>
	export default {
		data () {
			return {
				...getApp().globalData.config,	
				getCodeText: '获取验证码',
				getCodeBtnColor: "#999999",
				getCodeisWaiting: false,
				formData: {
				    realname: '',
				    idcard: '',
				    phone: '',
					code: '',	
					
				},	
				userInfo:{},
				verifyCode:'',
				
			}			
		},	
		onShow() {
			this.userInfo=uni.getStorageSync('userInfo')
		},
		onLoad(e) {			
			
		},		
		methods:{
			 ...getApp().globalData.function,	
			// 点击获取验证码
			getCode() {
				let that = this
				uni.hideKeyboard()          //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				let formData=this.formData
				if(!formData.phone){
					this.$showToast('请填写手机号！')
					return false
				}
				
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobileNumber))) { //校验手机号码是否有误
				// 	uni.showToast({
				// 		title: '请填写正确手机号码',
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#000000" //追加样式，修改颜色
				//示例用定时器模拟请求效果（跟后端联调时这里可写接口)
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				that.$http.alisend({phone:formData.phone}).then(res=>{
					console.log('res',res)
					if (res.resCode == '9999') {
						setTimeout(() => {
							uni.showToast({
								title: '验证码已发送',
								icon: "none"
							}); // 出提示框
							//示例默认1234，生产中请删除这一句。
							that.verifyCode = res.data.code; //纯前端发送验证码，进行填入
							that.setTimer();       //调用定时器方法
						}, 1000)
					}else{
						uni.showToast({title:res.resMessage,icon:"none"})
					}
				})
				
				
			},
			//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#999999";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},			
			submit(e){
				let formData=this.formData
				let that =this
				if(!formData.realname){
					this.$showToast('请填写姓名！')
					return false
				}
				if(!formData.idcard){
					this.$showToast('请填写身份证号！')
					return false
				}
				if(!formData.phone){
					this.$showToast('请填写手机号！')
					return false
				}
				if(!formData.code){
					this.$showToast('请填写验证码！')
					return false
				}	
				
				if(this.verifyCode!=formData.code){
					this.$showToast(' 验证码错误~！')
					return false
				}
									
				formData.token=uni.getStorageSync('userInfo').token
				
				that.$http.UserAauth(formData).then(res=>{
					console.log('res----',res)
					if (res.resCode == '9999') {
						uni.showToast({title:res.resMessage,icon:"none"})											
						setTimeout(function(){
							that.$routers.router('/pages/mine/index','switchTab') 
						},3000)
						
					} else {
						uni.showToast({title:res.resMessage,icon:"none"})
					}								
				})		
					
			},			
		}
	}
</script>

<style>
	page{
		background-color: #F0F9FE;
	}
	.get-code{
		display: flex;
		width: 172rpx;
		height: 56rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #36B3E9;
		font-weight: 400;
		font-size: 23rpx;
		color: #36B3E9;
		justify-content: center;
		align-items: center;
		text-align: center;
		line-height: 23rpx;
	}
	.fsz_info{
		display: flex;
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(1, 31, 55, 0.6);
		line-height: 7rpx;
	}
	.opinion_wrap{
		display: flex;
		flex-wrap: wrap;
		
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 27rpx;
		
		flex-direction: row;
	}
	button::after{
		border: none;
	}
	.box{
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  overflow: hidden;
	  width: 100%;
	  height: 100vh;
	  z-index: 8;
	}
	.black{
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100vh;
	  background: rgba(0, 0, 0, .5);
	  z-index: 10;
	}
	.nr{
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 500rpx;
	  z-index: 12;
	  background: #FFF;
	}
	.item{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  width: 100%;
	  height: 100rpx;
	  line-height: 100rpx;
	  padding: 0 20rpx;
	  box-sizing: border-box;
	  border-bottom: 1px solid #EEE;
	}

	
	.uni-form-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		font-size: 30rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;	
		/* width: 100%; */
	}
	
	button{
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: white;
		border: none;
		width: 85%;
		padding: 5rpx 0rpx;
		position: absolute; /* 设置按钮为绝对定位 */
		bottom: 0; /* 距离底边为0 */
		left: 50%; /* 左侧距离父元素宽度的50% */
		transform: translateX(-50%); /* 向左移动自身宽度的50%，保持水平居中 */	
		background: #36B3E9 ;
		border-radius: 40rpx;
		font-size: 30rpx;
		height: 88rpx;
		margin-bottom: 25rpx;
	}
</style>